import React, { ReactElement, useEffect} from 'react'
import { Card, Table, Button, Image, Form, Input} from 'antd';
import { useDispatch, useSelector,useHistory} from 'umi'
export default function index() {
    //内部数据
    const dispatch = useDispatch()
    const history=useHistory()
    useEffect(() => {
        dispatch({
            type: 'bannerModule/menuListInit'
        })
    }, [])
    const menuList = useSelector((state) => {
        return state.bannerModule.menuList
    })
    //删除
    const deleteOne=(_id)=>{
        dispatch({
            type: 'bannerModule/deleteBannerInit',
            payload:{
                _id
            }
        })
    }
    //详情修改跳转
    const goDetail=(data)=>{
        history.push('/home/banner/details/'+data._id)
    }
    //新增
    const toAdd=()=>{
        history.push('/home/banner/add')
    }
    const columns = [
        {
            title: '轮播图ID',
            dataIndex: '_id',
            key: '_id',
            align: 'center',
            width: 250
        },
        {
            title: '图片',
            dataIndex: 'image_src',
            key: 'image_src',
            render: text => {
                return <Image src={text} style={{ width: '200px', height: '120px' }}></Image>
            },
            align: 'center',
            width: 250
        },
        {
            title: '导航地图',
            dataIndex: 'navigator_url',
            key: 'navigator_url',
            align: 'center',
            width: 200
        },
        {
            title: '打开方式',
            dataIndex: 'open_type',
            key: 'open_type',
            align: 'center',
            width: 200
        },
        {
            title: '操作',
            render: text => (
                <>
                    <Button type="dashed" danger  onClick={()=>deleteOne(text._id)}>删除</Button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <Button type="default" onClick={()=>goDetail(text)}>修改</Button>
                </>
            ),
            align: 'center'
        }
    ]
    return (
        <Card title="菜谱列表" extra={<a onClick={toAdd}>新增</a>} style={{ width: "98.5%" }}>
            <Table
                rowKey="_id"
                columns={columns}
                dataSource={menuList}
                bordered
                pagination={{ defaultCurrent: 1, defaultPageSize: 5, showQuickJumper: true }}
            />
        </Card>
    )
}



